<template>
  <view class="barrager-container" v-if="visible">
    <!-- APP环境特殊处理 -->
    <!-- #ifdef APP-PLUS -->
    <view class="app-barrager" :style="{ top: topPosition }">
      <image
        class="avatar"
        :src="userAvatarURL20 || userAvatarURL"
        mode="aspectFill"
      />
      <view class="text-container">
        <text class="text">{{ processedContent }}</text>
      </view>
    </view>
    <!-- #endif -->

    <!-- H5环境 -->
    <!-- #ifndef APP-PLUS -->
    <view class="h5-barrager" :style="{ top: topPosition }">
      <image
        class="avatar"
        :src="userAvatarURL20 || userAvatarURL"
        mode="aspectFill"
      />
      <text class="text">{{ barragerContent }}</text>
    </view>
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";

// 组件属性
const props = defineProps({
  barragerContent: { type: String, default: "" },
  userAvatarURL: { type: String, default: "" },
  userAvatarURL20: { type: String, default: "" },
  barragerColor: { type: String, default: "rgba(255,255,255,0.95)" },
});

// 组件事件
const emit = defineEmits(["finished"]);

// 组件状态
const visible = ref(false);
const topPosition = ref("120rpx");

// 处理弹幕内容，限制长度
const processedContent = computed(() => {
  const maxLength = 15; // 最大字符数
  if (props.barragerContent && props.barragerContent.length > maxLength) {
    return props.barragerContent.substring(0, maxLength) + "...";
  }
  return props.barragerContent;
});

// 组件挂载时
onMounted(() => {
  if (props.barragerContent) {
    // 随机位置
    topPosition.value = `${Math.floor(Math.random() * 300) + 80}rpx`;

    // 显示弹幕
    visible.value = true;

    // 定时隐藏弹幕
    setTimeout(() => {
      visible.value = false;
      emit("finished");
    }, 6000);
  }
});

// 监听弹幕内容变化
watch(
  () => props.barragerContent,
  (newVal) => {
    if (!newVal) return;

    // 先隐藏
    visible.value = false;

    // 随机位置
    topPosition.value = `${Math.floor(Math.random() * 300) + 80}rpx`;

    // 延迟显示
    setTimeout(() => {
      visible.value = true;

      // 定时隐藏弹幕
      setTimeout(() => {
        visible.value = false;
        emit("finished");
      }, 6000);
    }, 50);
  }
);
</script>

<style>
.barrager-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* APP弹幕样式 */
/* #ifdef APP-PLUS */
.app-barrager {
  position: fixed;
  right: -100%;
  padding: 6rpx 12rpx;
  background-color: v-bind(barragerColor);
  border-radius: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
  z-index: 10000;
  display: flex;
  align-items: center;
  animation: app-move 6s linear forwards;
  width: auto !important;
  min-width: 120rpx;
  max-width: 500rpx !important;
  flex-wrap: nowrap;
  flex-direction: row;
  box-sizing: border-box;
  white-space: nowrap;
}

.text-container {
  flex: 0 1 auto;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  max-width: 400rpx;
}

.app-barrager .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  margin: 0;
  display: inline;
  width: auto;
  box-sizing: content-box;
  font-size: 26rpx;
  word-break: keep-all;
}

.app-barrager .avatar {
  flex: 0 0 auto;
  margin-right: 8rpx;
}

@keyframes app-move {
  0% {
    right: -100%;
  }
  10% {
    right: 0%;
  }
  90% {
    right: 80%;
    opacity: 1;
  }
  100% {
    right: 100%;
    opacity: 0;
  }
}
/* #endif */

/* H5弹幕样式 */
/* #ifndef APP-PLUS */
.h5-barrager {
  position: absolute;
  right: -300rpx;
  padding: 8rpx 16rpx;
  background-color: v-bind(barragerColor);
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  max-width: 70%;
  animation: h5-move 4s linear forwards;
}

@keyframes h5-move {
  0% {
    right: -300rpx;
  }
  5% {
    right: 0;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(-120vw);
    opacity: 0.3;
  }
}
/* #endif */

.avatar {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  margin-right: 8rpx;
  flex-shrink: 0;
}

.text {
  font-size: 26rpx;
  color: #222;
  font-weight: 500;
}
</style>
